import React from 'react';
import './State.css';
import _ from 'lodash';

//暴露
export default function State(){
    // 1. 创建状态
    let [night, setNight] = React.useState(false);
    let [color, setColor] = React.useState('#cef');

    //声明函数
    const changeBg = () => {
        setColor(`rgb(${_.random(0, 255)}, ${_.random(0, 255)},${_.random(0, 255)})`);
    }

    return <div>
        <h2>至尊宝, 我是{night ? '青霞仙子' : '紫霞仙子'}</h2>
        <button onClick={() => {
            //2. 调用函数 改变状态『可选的』
            setNight(!night);
        }}>点击切换</button>
        <hr />
        <div className='test' style={{background: color}}> </div>
        <button onClick={changeBg}>点击切换背景颜色</button>
    </div>
}